<html>
<head>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA37d9ET8ngUqGcqLnE3Vj3RQ3e17Nc6AuH7dyMe4xsso-34xv1BQelI_KKQ1KysFGrTOdvszJKcBmMg" type="text/javascript"></script>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.geocodable.debug.js" type="text/javascript"></script>
<style>
 input {
   border: 1px solid black;
   padding: 2px;
 }

 .disambiguation {
    background-color: white;
    color: black;
    display: none;
    position: absolute;
    z-index: 1;
    margin-left: 2px;
    border: 1px solid gray;
    border-top-width: 0px;
  }

  .disambiguationLink {
    border-bottom: 1px solid #ddd;
    padding-left: 2px;
    cursor: pointer;
    font-size: .8em;
  }
  
  .disambiguationLink:hover {
    background-color: #e8cadb;
  }
</style>
<script type=text/javascript>
$(document).ready(function() {
	$('#usonly').geocodable();
	$('#international').geocodable({countries:[]});
	$('#withtrigger').geocodable({
	  countries: [],
	  choiceCallback: function(mark) {
	  	$('#result').text(mark.address);	
	  }
	});
	
});
</script>
</head>
<body>
<p>The jquery-geocodable plugin provides a simple way to present a geocodable text
input field.</p>
<h2>US Only</h2>
<code>$('#usonly').geocodable();</code>
<p>
Location: <input type="text" id="usonly" />
</p>
<h2>International</h2>
<p>By default, the code limits results to US territories.  By setting the 'countries'
option to an empty array, this restriction is removed.</p>
<code>$('#international').geocodable({countries:[]});</code>
<p>
Location: <input type="text" id="international" />
</p>
<h2>International with Trigger</h2>
<pre><code>
$('#withtrigger').geocodable({
  countries: [],
  choiceCallback: function(mark) {
    $('#result').text(mark.address);
  }
});
</code></pre>
<p>
Location: <input type="text" id="withtrigger" /> (
You chose: <span id='result'>...</span>)
</p>
</body>
</html>